<template>
  <view class="nav">
    <view :class="avttab === key ? 'sel_nav_item' : 'nav_item'" v-for="(value, key) in tabname" :key="key" @click="navtab(key, value)">
      {{ key }}
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({ avttab: String, tabname: Object });
const emit = defineEmits(['chage']);
function navtab(key: any, value: any) {
  emit('chage', { key, value });
}
</script>

<style lang="scss" scoped>
.nav {
  width: 750rpx;
  height: 88rpx;
  background: #ffffff;
  display: flex;
  line-height: 88rpx;
  .nav_item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    font-family: Inter-Regular, Inter;
    font-weight: 400;
    color: #808089;
  }
  .sel_nav_item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: 700;
    color: #000;
    border-bottom: 4rpx solid #ffcc00;
  }
}
</style>
